// 五星 通用组件
<template>
  <span class="stars-wrapper">
    <span :class="['iconfont icon-star', { active: starNum >= 1 }]"></span>
    <span :class="['iconfont icon-star', { active: starNum >= 2 }]"></span>
    <span :class="['iconfont icon-star', { active: starNum >= 3 }]"></span>
    <span :class="['iconfont icon-star', { active: starNum >= 4 }]"></span>
    <span :class="['iconfont icon-star', { active: starNum >= 5 }]"></span>
  </span>
</template>

<script>
export default {
  name: "Stars",
  props: {
    starNum: Number,
  },
};
</script>

<style lang="scss" scoped>
@import "~styles/variables.scss";

.stars-wrapper {
  color: #ccc;

  .active {
    color: $starColor;
  }
}
</style>